var ScrollBar = function(dom,opt){
    var that = this;
    that.opt = opt ? opt : {};
    that.original = dom;
    that.el = dom.parentNode;
    that.init();
    return that;
};
var Bar = function(Parent,opt){
    var that = this;
    var bar  = BAR_MAP[opt.direction];
    that.barmap = bar;
    that.Parent = Parent;
    that.dict = {};
    that.bar = document.createElement('div');
    that.slide = document.createElement('div');
    that.bar.className = 'aiui-scrollbar-bar is-'+opt.direction;
    that.slide.className = 'aiui-scrollbar-slide';
    that.bar.appendChild(that.slide);
    Parent.scroll.appendChild(that.bar);
    aiui.event.bind(that.bar,"mousedown",function(e){
        var offset = Math.abs(e.target.getBoundingClientRect()[bar.direction] - e[bar.client]);
        var thumbHalf = (that.slide[bar.offset] / 2);
        var thumbPositionPercentage = ((offset - thumbHalf) * 100 / that.bar[bar.offset]);
        Parent.wrap.scrollTop =  (thumbPositionPercentage * Parent.wrap[bar.scrollSize] / 100);
    });

    aiui.event.bind(that.slide,'mousedown',function(e){
        startDrag(e);
        that[bar.axis] = (e.currentTarget[bar.offset] - (e[bar.client] - e.currentTarget.getBoundingClientRect()[bar.direction]));
    })

    function startDrag(e){
        e.stopImmediatePropagation();
        that.cursorDown = true;
        aiui.event.bind(document, 'mousemove', mouseMoveDocumentHandler);
        aiui.event.bind(document, 'mouseup', mouseUpDocumentHandler);
        document.onselectstart = function(){return false;};
    }

    function mouseMoveDocumentHandler(e){
        if (that.cursorDown === false) return;
        var prevPage = that[bar.axis];
        if (!prevPage) return;
        var offset = ((Parent.original.getBoundingClientRect()[bar.direction] - e[bar.client]) * -1);
        var thumbClickPosition = (that.slide[bar.offset] - prevPage);
        var thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / Parent.original[bar.offset]);
        Parent.wrap[bar.scroll] = thumbPositionPercentage;
    }

    function mouseUpDocumentHandler(e){
        that.cursorDown = false;
        that[bar.axis] = 0;
        aiui.event.unbind(this,'mousemove',mouseMoveDocumentHandler);
        document.onselectstart = null;
    }
}

var BAR_MAP = {
    vertical: {
        offset: 'offsetHeight',
        scroll: 'scrollTop',
        scrollSize: 'scrollHeight',
        size: 'height',
        key: 'vertical',
        axis: 'Y',
        client: 'clientY',
        direction: 'top'
    },
    horizontal: {
        offset: 'offsetWidth',
        scroll: 'scrollLeft',
        scrollSize: 'scrollWidth',
        size: 'width',
        key: 'horizontal',
        axis: 'X',
        client: 'clientX',
        direction: 'left'
    }
};
ScrollBar.prototype = {
    init:function(){
        var that = this;
        var scrollwidth = aiui.scrollWidth();
        var style = 'margin-right:-'+scrollwidth+'px;margin-bottom:-'+scrollwidth+'px;';
        that.scroll = document.createElement('div');
        that.wrap = document.createElement("div");
        that.scroll.className = 'aiui-scrollbar';
        that.wrap.className = "aiui-scrollbar-wrap";
        if(that.opt.className){
            that.wrap.className = that.wrap.className+' '+that.opt.className;
        }
        that.wrap.style += that.wrap.style ? ";"+style : style;
        that.el.prepend(that.scroll);
        that.scroll.appendChild(that.wrap);
        that.wrap.appendChild(that.original);
        that.bar={};
        that.bar['vertical'] = new Bar(that,{direction:'vertical'});
        that.bar['horizontal'] = new Bar(that,{direction:'horizontal'});
        that.update();
        aiui.event.bind(that.wrap,'scroll',function(e){
            that.moveY = ((that.wrap.scrollTop * 100) / that.wrap.clientHeight);
            that.moveX = ((that.wrap.scrollLeft * 100) / that.wrap.clientWidth);
            that.bar['vertical'].slide.style.transform = 'translateY('+that.moveY+'%)';
            that.bar['horizontal'].slide.style.transform = 'translateX('+that.moveX+'%)';
        })
    },
    update:function(){
        var heightPercentage, widthPercentage;
        var wrap = this.wrap;
        if (!wrap) return;
        heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
        widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
        this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
        this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
        this.bar['vertical'].slide.style.height = this.sizeHeight;
        this.bar['horizontal'].slide.style.width = this.sizeWidth;
    }
}
export default ScrollBar;